<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>注册页</title>
    <link rel="stylesheet" type="text/css" href="${bp}/static/css/base.css">
    <script src="${bp}/static/js/jquery-1.11.1.js"></script>
</head>
<body>
<div id="register">
    <h3>欢迎注册</h3>
    <form action="${bp}/user?method=register" method="post">
        <p><input type="text" name="username" class="input" placeholder="请输入用户名"><span id="msg"></span></p>
        <p><input type="password" name="password" class="input" placeholder="请输入密码"></p>
        <p><input type="submit" value="立即注册" class="input"></p>
    </form>
</div>

<script>
    // 绑定文本框的失去焦点事件
    $(":text").blur(function () {
        //获取文本框的内容  this 是js对象 无法调用val()   ->  $(this) jquery对象
        let username = $(this).val()
        // 发送异步请求方式1  验证用户名是否可用
        <%--$.ajax({--%>
        <%--    url:'${bp}/user?method=checkUsername',// 请求接口--%>
        <%--    data:{username:username},  // 请求参数的设置--%>
        <%--    type:'post',  // 设置请求的方式  post  get--%>
        <%--    dataType:'json' , //  设置响应数据的格式  json    js的对象  js对象的字符串形式进行数据的传递  {"username":username}--%>
        <%--    success:function (res) {   //  请求成功回调函数--%>
        <%--        if(res.code==200){--%>
        <%--            $("#msg").css("color","green")--%>
        <%--            $(":submit").attr("disabled",false)--%>
        <%--        }else {--%>
        <%--            $("#msg").css("color","red")--%>
        <%--            $(":submit").attr("disabled",true)--%>
        <%--        }--%>

        <%--        $("#msg").text(res.msg)--%>
        <%--    },--%>
        <%--    error:function () {--%>
        <%--        alert("请求发送失败")--%>
        <%--    }--%>
        <%--})--%>


        // 发送异步请求方式 2  验证用户名是否可用
        <%--$.get('${bp}/user?method=checkUsername',{username:username},function (res) {--%>
        <%--    if(res.code==200){--%>
        <%--        $("#msg").css("color","green")--%>
        <%--        $(":submit").attr("disabled",false)--%>
        <%--    }else {--%>
        <%--        $("#msg").css("color","red")--%>
        <%--        $(":submit").attr("disabled",true)--%>
        <%--    }--%>
        <%--    $("#msg").text(res.msg)--%>
        <%--},'json')--%>

        // 发送ajax请求之前 对用户名进行判空
        if(username==""){
            $("#msg").text("用户名不能为空")
            $("#msg").css("color","red")
            $(":submit").attr("disabled",true)
            return false;
        }

        // 发送异步请求方式 3  验证用户名是否可用

        $.post('${bp}/user?method=checkUsername',{username:username},function (res) {
            if(res.code==200){
                $("#msg").css("color","green")
                $(":submit").attr("disabled",false)
            }else {
                $("#msg").css("color","red")
                $(":submit").attr("disabled",true)
            }
            $("#msg").text(res.msg)
        },'json')

    })


</script>
</body>
</html>
